<template>
  <div class="page AuthPage" v-show="hasInfo === false || hasInfo === true">
    <template v-if="hasInfo">
      <van-nav-bar title="认证信息" left-arrow @click-left="goBack"/>
      <div class="top-bg">
        <img :src="'./img/s1.png'"/>
        <span>您已通过实名认证！</span>
      </div>
      <van-form style="margin-top: 0.27rem;">
        <van-field readonly label="真实姓名" :value="info.userRealName"/>
        <van-field readonly label="身份证号码" :value="info.userIdCard"/>
      </van-form>
      <div style="margin: 1rem 16px 16px; text-align: center;">
        <van-button block type="info" @click="goBack" style="margin-bottom: 0.4rem;">关闭</van-button>
        <span class="font-blue" @click="reAuth">重新认证</span>
      </div>
    </template>
    <template v-else>
      <van-nav-bar title="认证信息" left-arrow @click-left="goBack"/>
      <van-form style="margin-top: 0.27rem;" :disabled="btnLoading" @submit="submit">
        <van-field required :rules="[ $check('', true) ]" label="真实姓名" v-model="form.name" placeholder="请输入"/>
        <van-field required :rules="[ $check('', true) ]" label="身份证号码" v-model="form.code" placeholder="请输入"/>
        <div style="width: 100%; background: #fff; overflow: hidden; box-sizing: border-box; padding: 0.1rem 0.5rem; margin-top: 0.27rem;">
          <div style="line-height: 1rem; font-size: 16px; font-weight: 600;">请上传本人身份证正反面</div>
          <div class="flex-row">
            <div>
              <div style="font-size: 16px; font-weight: 600;">头像面</div>
              <div style="font-size: 12px; color: #6e6e6e; margin-top: 0.2rem;">上传您的身份证头像面</div>
            </div>
            <div @click="seleImage('idCardFrontUrl')" style="width: 4.8rem; height: 3rem; border: 1px solid #ccc; border-radius: 0.1rem; justify-content: center;" class="flex-row">
              <img v-if="form.idCardFrontUrl" :src="form.idCardFrontUrl" style="max-width: 100%; max-height: 100%;">
              <img v-else :src="'./img/card1.png'" style="width: 100%; height: 100%;">
            </div>
          </div>
          <div class="flex-row" style="margin: 0.4rem 0;">
            <div>
              <div style="font-size: 16px; font-weight: 600;">国徽面</div>
              <div style="font-size: 12px; color: #6e6e6e; margin-top: 0.2rem;">上传您的身份证国徽面</div>
            </div>
            <div @click="seleImage('idCardBackUrl')" style="width: 4.8rem; height: 3rem; border: 1px solid #ccc; border-radius: 0.1rem; justify-content: center;" class="flex-row">
              <img v-if="form.idCardBackUrl" :src="form.idCardBackUrl" style="max-width: 100%; max-height: 100%;">
              <img v-else :src="'./img/card2.png'" style="width: 4.8rem;">
            </div>
          </div>
        </div>
        <div style="margin: 1rem 16px 16px; text-align: center;">
          <van-button block type="info">保存认证</van-button>
        </div>
      </van-form>
    </template>
  </div>
</template>

<script>
export default {
  data() {
    return {
      info: {},
      form: {},
      hasInfo: undefined,
      btnLoading: false
    };
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    submit() {
      if(!this.form.idCardFrontUrl) return this.$toast('请上传身份证正面图片');
      if(!this.form.idCardBackUrl) return this.$toast('请上传身份证反面图片');
      this.btnLoading = true;
      this.$axios.post('/api/IdentityController/addIdentity', {
        ...this.form, userId: this.$store.state.userInfo.userId
      }).then(res => {
        this.btnLoading = false;
        this.$toast('认证成功！');
        this.info = {
          userRealName: res.name,
          userIdCard: res.code,
          idCardFrontUrl: res.idCardFrontUrl,
          idCardBackUrl: res.idCardBackUrl,
        };
        this.hasInfo = true;
      }).catch(() => {
        this.btnLoading = false;
      });
    },
    seleImage(type) {
      this.$tool.seleImg().then(res => {
        this.form = { ...this.form, [type]: res };
      });
    },
    reAuth() {
      let info = this.info;
      this.form = {
        name: info.userRealName,
        code: info.userIdCard,
        idCardFrontUrl: info.idCardFrontUrl,
        idCardBackUrl: info.idCardBackUrl
      };
      this.hasInfo = false;
    }
  },
  mounted() { 
    this.$axios.get('/api/IdentityController/getIdentity', {
      userId: this.$store.state.userInfo.userId
    }).then(res => {
      if(res) {
        this.info = res;
        this.hasInfo = true;
      } else {
        this.hasInfo = false;
      }
    }).catch(() => {
      this.goBack();
    });
  }
};
</script>

<style lang="less">
.AuthPage {
  .top-bg {
    height: 3.76rem; 
    background-image: linear-gradient(-90deg, #1469fe 0%, #2775fd 100%); 
    overflow: hidden;
    color: #fff;
    * {
      display: block;
      text-align: center;
      margin: 0 auto;
    }
    img {
      width: 1.83rem; 
      height: 2rem;
      margin-top: 0.53rem;
    }
    span {
      font-size: 14px;
      margin-top: 0.3rem;
    }
  }
}
</style>